<template>
  <a-row class="menu" type="flex" justify="space-between">
    <a-col :span="8" class="menu-l">
      <a-col :span="5" class="menu-l cp" @click="menuTag('/')">首页</a-col>
      <a-col :span="6" class="menu-l cp" @click="menuTag('/game')">我要买</a-col>
      <a-col :span="6" class="menu-l cp" @click="menuTag('/selectgame')">我要卖</a-col>
    </a-col>
    <a-col :span="14" class="menu-r">
      <a-col :span="4" v-if="!name">
        <span class="cp" @click="menuTag('login')">[登录]</span>
        <span class="cp" @click="menuTag('register')">[注册]</span>
      </a-col>
      <a-col :span="6" v-else>
        <span class="cp">{{name}}</span>
        <span class="cp" @click="menuTag('out')">[退出]</span>
      </a-col>
      <a-col :span="2" class="cp" @click="menuTag('/mine/notice')">消息</a-col>
      <a-col :span="3" class="cp" @click="menuTag('/mine')">个人中心</a-col>
      <a-col :span="3" class="cp" @click="menuTag('/consult/help')">帮助中心</a-col>
    </a-col>
    <Login :visibles="visibles" :types="types" :user_id="user_id" @close="close" />
  </a-row>
</template>
<script>
import { LOGIN, GET_ACCESS_TOKEN } from "./server";
export default {
  components: {
    Login: () => import("./login")
  },
  data() {
    return {
      visibles: false,
      types: "login",
      name: "",
      auth_code: '',
      user_id: ''
    };
  },
  created() {
    this.name = this.$store.state.phone
    // console.log(this.$token.getCookie("member_id"), 41)
    
    if (this.$route.query.auth_code) {
      // auth_code有是支付宝登录页回来的
      this.auth_code = this.$route.query.auth_code
      GET_ACCESS_TOKEN({
        auth_code: this.auth_code
      }).then(res => {
        // console.log(res, 49)
        if (res.codes == 500) {
          this.user_id = res.user_id
          this.visibles = true
          this.types = 'register'
        } else if (res.code == 200) {
          // console.log(123)
          if (res.msg == '授权成功') {
            this.$notification.open({
              message: '授权成功！',
              description:
                '欢迎使用全球虚拟物品交易中心',
              icon: <a-icon type="check-circle" style="color: #52c41a" />,
            });
          } else {
            this.name = res.data.phone
            this.$token.setCookie("member_id", res.data.member_id);
            this.$token.setCookie("phone", res.data.phone);
            this.$store.commit("cookie", {
              member_id: res.data.member_id,
              phone: res.data.phone
            });
            this.$store.commit("login", true)
            this.$notification.open({
              message: '登录成功！',
              description:
                '欢迎使用全球虚拟物品交易中心',
              icon: <a-icon type="check-circle" style="color: #52c41a" />,
            });
          }
        }
      })
    }

  },

  methods: {
    menuTag(path) {
      let that = this
      switch (path) {
        case "login":
            this.visibles = true;
            this.types = path;
          break;
        case "/mine":
          if (!this.$store.state.member_id) {
            this.visibles = true;
            this.types = 'login';
          } else {
            this.$router.push(path);
          }  
          break;
        case "/mine/notice":
          if (!this.$store.state.member_id) {
            this.visibles = true;
            this.types = 'login';
          } else {
            this.$router.push(path);
          }  
          break;
        case "/selectgame":
          if (!this.$store.state.member_id) {
            this.visibles = true;
            this.types = 'login';
          } else {
            this.$router.push(path);
          }  
          break;
        case "register":
          this.visibles = true;
          this.types = path;
          break;
        case "out":
          this.$confirm({
            title: '是否退出?',
            onOk() {
              that.$token.delCookie("member_id");
              that.$token.delCookie("phone");
              that.$store.commit("cookie", {
                member_id: '',
                phone: ''
              });
              that.$store.commit("login", false)
              that.name = "";
              that.$router.push("/");
            },
            onCancel() {}
          });
          break;
        default:
          this.$router.push(path);
          break;
      }
    },
    close() {
      this.visibles = false;
      this.$store.commit("loginSoft", null);
      if (this.$token.getCookie("phone")) {
        this.name = this.$token.getCookie("phone");
      }
    }
  },
  watch: {
    "$store.state.loginSoft"(v) {
      if (v) this.visibles = true;
    }
  }
};
</script>
<style lang="less" >
.menu {
  width: 1200px;
  height: 42px;
  line-height: 42px;
  margin: 0 auto;
  background-color: #0084ff;
  color: #fff;
  .menu-l {
    font-size: 16px;
    font-weight: bold;
  }
  .menu-r {
    display: flex;
    justify-content: flex-end;
    text-align: right;
  }
}
</style>
